<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>车辆事故</title>
    <link rel="stylesheet" href="UC_style.css">
    <style>
        .main {
            width: 100%;
            height: 800px;
            background: RGB(239,239,239);
            float: left;
        }

        #header2 {
            height: 40px;
            background: white;
        }

        table,
        th,
        td {
            background-color: white;
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            width: 200px;
            height: 50px;
            padding: 5px;
        }

        th {
            font-size: 18px;
        }

        .had {
            text-align: center;
            height: 600px;
            width: 80%;
            margin: 0px auto;
        }

        .input1 {
            border: 0px;
            height: 90%;
            font-size:16px;
            width: 100%;
        }
        .text {
            border: none;
            height: 50px;
            width: 100%;
            font-size: 16px;
        }
        select {
            border: 0px;
            height: 90%;
            width: 90%;
        }

        textarea {
            border: 0px;
            width: 100%;
            resize: none;
            font-size: 16px;
        }

        .button1 {
            height: 40px;
            width: 120px;
            font-size: 15px;
            margin-left: 1000px;
            position: center;
            color: #000000;
            background-color: #808080;
        }

        h2 {
            text-align: center;
        }
        .input2 {
            color: black;
            background-color: RGB(239,239,239);
            font-size: 20px;
            height: 40px;
            width: 100px;
            margin-left: 450px;
            margin-right: 30px;
        }

            .input2:hover {
                background-color: #808080;
            }
        .button_file {
            background-color: white;
            color: RGB(64,158,255);
            height: 22px;
            text-align: center;
            font-size: 16px;
            border: none;
            font-weight: bold;
        }

            .button_file:hover {
                background-color: RGB(249,249,249);
            }

            .button_file:active {
                transform: translateY(2px);
            }
    </style>
</head>

<body>
    <div class="main">
        <div id="header2">
            <img src="img/frist.png" alt="Big Boat" width="30" height="30" style=" vertical-align: middle;">
            司机端 > 车辆事故
        </div>
        <h2>事故申报表</h2>
        <form>
            <table class="had">
                <thead>
                    <tr>
                        <th>报告人：</th>
                        <td><input class="input1" type="text"required></td>
                        <th>联系电话：</th>
                        <td>
                            <input class="input1" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"required>
                        </td>
                        <th>事故时间：</th>
                        <td><input class="input1" type="datetime-local" id="date" name="date" required></td>
                    </tr>
                    </thead>
                <tbody>
                    <tr>
                        <th>车牌：</th>
                        <td>
                            <input class="input1" type="text" required>
                        </td>
                        <th>违章类别：</th>
                        <td>
                            <select id="" name="">
                                <option value="" selected disabled hidden></option>
                                <option value="">闯红灯</option>
                                <option value="">超速</option>
                                <option value="">超载</option>
                                <option value="">违章停车</option>
                                <option value="">无证驾驶</option>
                                <option value="">违章超车</option>
                                <option value="">疲劳驾驶</option>
                                <option value="">酒后驾驶</option>
                                <option value="">未系安全带</option>
                                <option value="">车祸</option>
                            </select>
                        </td>
                        <th>扣分：</th>
                        <td><input class="input1" type="number" id="" name="" min="1" max="12" required></td>
                    </tr>
                    <tr>
                        <th>车辆状况：</th>
                        <td>
                            <select id="" name="">
                                <option value="" selected disabled hidden></option>
                                <option value="xs">可行驶</option>
                                <option value="noxs">不可行驶</option>
                                <option value="died">报废</option>
                            </select>
                        </td>
                        <th>事故地点：</th>
                        <td><input class="input1" type="text" required></td>
                        <th>赔偿金额：</th>
                        <td><input class="input1" type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d.]/g,'')"required></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th style="height:100px">事故描述：</th>
                        <td colspan="5"><textarea style="height:200px;" id="reason" name="reason" rows="4" cols="30" required></textarea></td>
                    </tr>
                    <tr>
                        <th style="height:100px">备注：</th>
                        <td colspan="5"><textarea style="height:150px;" id="reason" name="reason" rows="4" cols="30" required></textarea></td>
                    </tr>
                    <tr>
                        <th style="height:50px">附件</th>
                        <td colspan="5" style="text-align:left">
                            <input type="button" class="button_file" value="添加附件" onclick="path.click()">
                            <input type="text" class="text" name="lookfile" id="lookfile" style="outline:none;" readonly>
                            <input type="file" id="path" style="display:none" onchange="lookfile.value+='   '+this.value">
                        </td>
                    </tr>
                </tfoot>
            </table>

            <br>
            <input type="submit" class="input2" value="提交">
            <input type="reset" class="input2" value="清空">
        </form>
    </div>
</body>
</html>
